<!-- 教学管理-校园管理-教职工一卡通 -->
<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>

          <el-col :span="6">
            <el-form-item label="学校名称">
              <el-select v-model="listQuery.fcustomno" placeholder="请选择"
                :disabled="$store.getters.userInfo.manufacturer">
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="IC卡号">
              <el-input v-model="listQuery.fcatno" placeholder="请输入IC卡号" clearable />
            </el-form-item>
          </el-col>

          <template v-if="showAll">
          
          <el-col :span="6">
            <el-form-item label="名称">
              <el-input v-model="listQuery.fcatname" placeholder="请输入编号或姓名" clearable />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="手机号码">
              <el-input v-model="listQuery.fcatno" placeholder="请输入手机号码" clearable />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="性别">
              <el-select v-model="listQuery.fcustomno" placeholder="请选择"
                :disabled="$store.getters.userInfo.manufacturer">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
           <el-form-item label="录入情况">
            <el-select v-model="listQuery.fcustomno" placeholder="请选择"
              :disabled="$store.getters.userInfo.manufacturer">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          </el-col>

          </template>

          <el-col :span="12">
            <el-form-item label="">
              <el-button type="primary" icon="el-icon-search" @click="getlist">查询</el-button>
              <el-button type="success" icon="el-icon-upload2" @click="insert(undefined)">批量上传</el-button>
              <!-- <el-button type="warning" icon="el-icon-upload2">导入</el-button> -->
              <el-button type="text" icon="el-icon-arrow-down" @click="showAll = true" v-if="!showAll">展开</el-button>
              <el-button type="text" icon="el-icon-arrow-up" @click="showAll = false" v-else>收起</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <JNPF-table :data="list" border v-loading="loading">
          <el-table-column prop="FSCHOOL" label="学校名称" width="95"></el-table-column>
          <el-table-column prop="FCATNO" label="教职工编号" width="115"></el-table-column>
          <el-table-column prop="FCATNAME" label="教职工名称" width="115"></el-table-column>
          <el-table-column prop="FTELNO" label="手机号码" width="115"> </el-table-column>
          <el-table-column prop="FCARD1" label="IC卡1" > </el-table-column>
          <el-table-column prop="FCARD2" label="IC卡1"  ></el-table-column>
          <el-table-column fixed="left" label="操作" width="150">
            <template slot-scope="scope">
              <el-button @click.native.prevent="insert(scope.row.FCATNO)" icon="el-icon-edit" type="text" size="small">
                发卡
              </el-button>
              <el-popconfirm title="确定回收当前卡片吗？" @confirm="Catdelete(scope.row.FCATNO)">
                <el-button slot="reference" icon="el-icon-delete" style="color: red;margin-left: 10px;"
                  type="text">回收</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </JNPF-table>
        <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />
        <Form ref="Form" :parelist="list" />
      </div>
    </div>
  </div>
</template>

<script>
  import Form from "./Form.vue"
  export default {
    name: 'shop',
    components: { Form },
    data() {
      return {
        showAll: false,

        options3: [{
          value: '20E01',
          label: '闵行春申小学'
        }, {
          value: '20E02',
          label: '闵行莘城中学'
        }, {
          value: '20N01',
          label: '闵行莘松中学'
        }, {
          value: '20N02',
          label: '闵行莘庄中学'
        }],

        //所属校区选择数据
        options1: [{
            value: '1',
            label: '男'
          }, {
            value: '2',
            label: '女'
          }],

      options2: [{
          value: '1',
          label: '未录入'
        }, {
          value: '2',
          label: '已录入'
        }],

        total: 0,
        list: [
        {
          "FSCHOOL": "闵行春申小学",
          "FCATNO": "H1001",
          "FCATNAME": "秦始皇",
          "FTELNO": "17780901235",
          "FCARD1":"0887836507",
          "FCARD2":"-",
          "FSEX":"男",
          "FSEQNO": 1,
          "FVISIBLE": "正常",
          "FIMAGE": null,
          "FOPERATOR": "system",
          "FUPDDATE": "2011-02-16T02:57:02.000+00:00"
        },{
          "FSCHOOL": "闵行莘城中学",
          "FCATNO": "H1002",
          "FCATNAME": "汉武帝",
          "FTELNO": "16790872156",
          "FCARD1":"0887831278",
          "FCARD2":"-",
          "FADDRESS":"奉36号楼502室",
          "FSEX":"男",
          "FSEQNO": 1,
          "FVISIBLE": "正常",
          "FIMAGE": null,
          "FOPERATOR": "system",
          "FUPDDATE": "2011-02-16T02:57:02.000+00:00"
        }
        ,{
          "FSCHOOL": "闵行莘松中学",
          "FCATNO": "H1003",
          "FCATNAME": "唐太宗",
          "FTELNO": "13918840503",
          "FCARD1":"0887532507",
          "FCARD2":"-",
          "FADDRESS":"奉36号楼503室",
          "FSEX":"男",
          "FSEQNO": 1,
          "FVISIBLE": "正常",
          "FIMAGE": null,
          "FOPERATOR": "system",
          "FUPDDATE": "2011-02-16T02:57:02.000+00:00"
        }
        ,{
          "FSCHOOL": "闵行莘庄中学",
          "FCATNO": "H1004",
          "FCATNAME": "宋太祖",
          "FTELNO": "13501884042",
          "FCARD1":"0885678507",
          "FCARD2":"-",
          "FSEX":"男",
          "FSEQNO": 1,
          "FVISIBLE": "正常",
          "FIMAGE": null,
          "FOPERATOR": "system",
          "FUPDDATE": "2011-02-16T02:57:02.000+00:00"
        }
        ,{
          "FSCHOOL": "闵行莘庄中学",
          "FCATNO": "H1005",
          "FCATNAME": "成吉思汗",
          "FTELNO": "16609871256",
          "FCARD1":"0997836507",
          "FCARD2":"-",
          "FSEX":"男",
          "FSEQNO": 1,
          "FVISIBLE": "正常",
          "FIMAGE": null,
          "FOPERATOR": "system",
          "FUPDDATE": "2011-02-16T02:57:02.000+00:00"
        },{
          "FSCHOOL": "闵行莘庄中学",
          "FCATNO": "H1006",
          "FCATNAME": "武则天",
          "FTELNO": "17709871256",
          "FCARD1":"0887928118",
          "FCARD2":"-",
          "FSEX":"男",
          "FSEQNO": 1,
          "FVISIBLE": "正常",
          "FIMAGE": null,
          "FOPERATOR": "system",
          "FUPDDATE": "2011-02-16T02:57:02.000+00:00"
        }
        ],
        loading: false,
        listQuery: {
          page: 1,
          limit: 20,
          sort: "desc",
          sidx: "",
          fcatno: "",
          fcatname: ""
        },
      };
    },
    computed: {},
    created() {
    },
    methods: {
      insert(row) {
        this.$refs.Form.init(row);
      },
    },
  };
</script>